<template>
    <div class="my" ref="homePage">
        <div class="edit_line">
            <div class="edit_title">会员名：</div>
            <div class="edit_c"><input type="text" v-model="info.memname" @blur="sureName()"/></div>
        </div>
        <div class="edit_line">
            <div class="edit_title">手机号：</div>
            <div class="edit_c"><input type="text" v-model="info.mobile" @blur="sureMobile()"/></div>
        </div>
        <div class="edit_line M008 arrow" @click="selectSex()">
            <div class="edit_title">性别:</div>
            <div class="edit_c" v-if="info.sex ==3">保密</div>
            <div class="edit_c" v-if="info.sex ==1">男</div>
            <div class="edit_c" v-if="info.sex ==2">女</div>
        </div>
        <div class="edit_line M029" @click="selectData()">
            <div class="edit_title">生日:</div>
            <div class="edit_c">{{info.birthday}}</div>
        </div>
        <mt-popup  v-model="popupVisible1" position="bottom">
            <mt-picker :slots="slots" value-key="name" @change="onValuesChange" showToolbar>
                <div class="sexpickerBtn">
                    <span>取消</span>
                    <span @click="backPickerSubBtn">确认</span>
                </div>
            </mt-picker>
        </mt-popup>
        <mt-popup v-model="popupVisible2" position="bottom">
            <mt-datetime-picker ref="picker" type="date" v-model="dateVal"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日"
             @confirm="dateConfirm()">
            </mt-datetime-picker>
        </mt-popup>
    </div>
</template>
<script>
export default {
    data(){
        return{

            info:{
                memname:'',
                mobile:'',
                sex:'女',
                birthday:'',
            },
            popupVisible1:false,
            popupVisible2:false,
            slots: [
                {
                values: [{value:1,name:'男'},{value:2,name:'女'},{value:3,name:'保密'}],
                textAlign: 'center'
                }
            ],
            sureSex:{},
            dateVal:new Date(),
            clientHeight:'',
            merid:0
        }
    },
    mounted(){
      this.clientHeight = document.documentElement.clientHeight
      window.onresize = function temp() {
        this.clientHeight = document.documentElement.clientHeight;
      };
    },
    watch: {
      clientHeight: function () {
        this.changeFixed(this.clientHeight)
      }
    },
    created(){
       this.info = this.$route.query
    },
    methods:{
        changeFixed(clientHeight){
            this.$refs.homePage.style.height = clientHeight+'px';
        },
        //确定姓名
        sureName(){
            let that = this
            let key = 'n'+ that.info.memname
            this.$http.get('/user/member/edit',{memid:that.info.memid,key:key}).then((res)=>{
                if(res.code == -1){
                    that.$messagebox('提示',res.msg)
                }
            })
        },
        //确定手机号
        sureMobile(){
            let that = this
            let key = 'm'+ that.info.mobile
            this.$http.get('/user/member/edit',{memid:that.info.memid,key:key}).then((res)=>{
                if(res.code == -1){
                    that.$messagebox('提示',res.msg)
                }
            })
        },
        selectSex(){
            this.popupVisible1 = true
        },
        onValuesChange(picker, values) {
            this.sureSex = values[0]
        },
        //性别确定
        backPickerSubBtn() {
            this.info.sex = this.sureSex.value
            let that = this
            let key = 's'+ that.info.sex
            this.$http.get('/user/member/edit',{memid:that.info.memid,key:key}).then((res)=>{
                if(res.code == -1){
                    that.$messagebox('提示',res.msg)
                }
            })
            this.popupVisible1 = false
        },
        selectData () {
            this.popupVisible2 = true
            if (this.birthday) {
                this.dateVal = this.birthday
            } else {
                this.dateVal = new Date()
            }
            this.$refs['picker'].open()
        },
        //生日确定
        dateConfirm () {
            this.info.birthday = this.format(this.dateVal)
            let that = this
            let key = 'b'+ this.info.birthday
            this.$http.get('/user/member/edit',{memid:that.info.memid,key:key}).then((res)=>{
                if(res.code == -1){
                    that.$messagebox('提示',res.msg)
                }
            }).catch((res)=>{

            })
        },
        format (time) {
            var date = new Date(time) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
            var D = date.getDate()
            return Y + M + D
        },
        getdata(){
            let that = this
            that.$http.get('').then((res)=>{
                if(res.code==0){
                    res.info = res.data
                }else{
                    that.$messagebox(res.msg)
                }
            }).catch((res)=>{
                console.log(res.msg)
            })
        }
    }
}
</script>
<style scoped>
.my{
    background-color: #EAECED;
    background-image:url('../assets/editBg.jpg');
    background-position: center top ;
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-top: 220px;
    color: #040000;
    font-size: 43px !important;
}
.edit_line{
    background-color: #fff;
    height: 139px;
    line-height: 139px;
    color: #040000;
    font-size: 43px;
    padding: 0 62px;
    display: flex;
}
.edit_title{
    flex: 0 0 20%;
}
.edit_c{flex:0 0 75%;}
.M029{margin-top: 14px;}
.M008{margin-top: 4px;}
.arrow{
    background-image:url('../assets/arrow_right.png');
    background-position: 93% center ;
    background-repeat: no-repeat;
    background-size: 13px 24px;
}
input{
    height: 134px;
    line-height: 134px;
    border: none;
}
.mint-popup-bottom{
    width: 100%!important;
}
.sexpickerBtn{
    display: flex;
    padding: 5px 15px;
    justify-content: space-between;
}
</style>